import { Todo } from "@/types";

interface TodoItemProps {
    todo: Todo;
    deleteTodo: (id: number) => void;
    toggleTodo: (id: number) => void;
}

function TodoItem ({todo, deleteTodo, toggleTodo}: TodoItemProps) {
    return (
        <li className="flex items-center justify-between bg-purple-450/40 p-3 rounded-md border border-purple-300/50">
            <span 
                className={`text-purple-800 ${todo.completed ? 'line-through text-purple-400/60' : ''}`}
            >
                {todo.text}
            </span>
            <div className="flex gap-2">
                <button 
                    onClick={() => toggleTodo(todo.id)}
                    className="bg-purple-300/70 hover:bg-purple-450/80 text-purple-800 px-2 py-1 rounded text-sm transition-colors"
                >
                    {todo.completed ? '还原' : '完成'}
                </button>
                <button 
                    onClick={() => deleteTodo(todo.id)}
                    className="bg-purple-100/80 hover:bg-purple-450/90 text-purple-700 px-2 py-1 rounded text-sm transition-colors"
                >
                    删除
                </button>
            </div>
        </li>
    )
}
export default TodoItem;